<template>
  <div :class="['queryList', active ? 'active' : '']" @click="switchQuery">
    <div v-if="value.length !== 0">
      <ul class="text-color8 info" >
        <li v-for="(item, index) in value" :key="item.id" :class="
            [{'selected-query-li' : selectedItem && selectedItem.id === item.id},
            {'list-highlight-li' : highlightItem(item)}]">
          <span @click = "clickItem(index,item)">{{item.infoName || item.name || item.docMirrorName}} </span>
          <i class="el-icon-close btn" @click="removeItem(index, item)"/>
        </li>
      </ul>
    </div>
    <div class="tip" v-if="value.length === 0">
      {{tipMsg}}
      <slot class="btn" name="imgContent"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "QueryList",
  props: {
    tipMsg: String,
    value: {
      type: Array,
      default: []
    },
    active: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showTip: false,
      selectedItem:null,
    }
  },
  methods: {
    removeItem(index, item) {
      this.value.splice(index, 1);
      this.$emit("removeItem", item);
    },

    switchQuery() {
      this.$emit('switchQuery');
    },
    clickItem(index,item){
      this.$emit('clickItem',index,item);
      this.selectedItem = item;
    },
    highlightItem(item){
      return this.selectedItem?.id === item.id
    }
  },
}
</script>

<style scoped>
.queryList {
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #222;
  border-radius: 3px;
  background: #ffefef;
  line-height: 24px;
  min-height: 35px;
  position: relative;
  margin: 10px 0 10px;
}
.query-item {
    min-height: 24px;
    cursor: pointer;
    padding: .25rem .5rem;
    margin: .25rem;
    align-items: center;
    justify-content: space-between;
    display: flex;
    border-radius: .2rem;
}
.active {
  background: #d6eaff;
}
.selected-query-li {
    background: rgba(0, 0, 0, .15);
}
.tip {
  text-align: center;
  margin-top: 3px;
  color: #757474;
}
.info {
  padding-left: 5px;
  padding-top: 3px;
}

.info li {
  display: flex;
  justify-content: space-between;
}

.btn {
  margin-top: -5px;
  padding: 5px;
}
.btn:hover {
  cursor: pointer;
}
</style>